<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery Drag 'n Drop</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
	<style>
	#container {
	
	}
	
	#left {
		float: left;
		width: 150px;
	}
	
	#right { 
		margin: 0;
		float: left;
		width: 300px;
	}
	
	#sortable {
		list-style-type: none; 
		margin: 0; 
		padding: 0; 
	}

	.dropzone {
		float: left;
		width: 128px;
		height: 128px;
		margin: 10px;
	}
	
	.widget {
 		margin: 3px 3px 3px 10px; 
/* 		padding: 5px;  */
		width: 64px;
		height: 64px;
		font-size: 0.5em;  
		text-align: center; 
		cursor: pointer;
	}
	
	#dropzoneLabel{
		padding: 100px;
	}
	
	#widget_cal {
		background-image: url("img/cal.png");
		background-size: 64px 64px;
	}
	
	#widget_maps {
		background-image: url("img/maps.png");
		background-size: 64px 64px;
	}
	
	#widget_photos {
		background-image: url("img/photos.png");
		background-size: 64px 64px;
	}
	
	#widget_stocks {
		background-image: url("img/stocks.png");
		background-size: 64px 64px;
	}
	
	#widget_weather {
		background-image: url("img/weather.png");
		background-size: 64px 64px;
	}
	
	.widget_big{
		width: 100%;
		height: 100%;
	}
	</style>
	<script>
	$("document").ready(function(){
		$( "#sortable" ).sortable({opacity: 0.35});
		$( ".dropzone" ).droppable({
			drop: function( event, ui ) {
				drop1 = $(ui.draggable);
				$("#dropzoneLabel").html($(ui.draggable).html());
				var div = $(document.createElement('div')).attr({
					name: $(ui.draggable).attr("id"),
					"class": "widget_big"
				});
				$(div).css("background-image", ui.draggable.css("background-image"));
				$(div).draggable({ revert: true,
								   opacity: 0.35});
				$(this).append(div);
				$(ui.draggable).hide();
			}
		});
		$("html").droppable({
			accept: ".widget_big",
			drop: function( event, ui ) {
				$("#"+ui.draggable.attr("name")).show();
				$(ui.draggable).remove();
			}
		});
	});
	</script>
</head>
<body>
<div id="container">
	<div id="left">
		<ul id="sortable">
			<li id="widget_cal" class="widget"></li>
			<li id="widget_maps" class="widget"></li>
			<li id="widget_photos" class="widget"></li>
			<li id="widget_stocks" class="widget"></li>
			<li id="widget_weather" class="widget"></li>
		</ul>
	</div>
	<div id="right">
		<div id="dropzone1" class="dropzone ui-state-default"></div>
		<div id="dropzone2" class="dropzone ui-state-default"></div>
		<div id="dropzone3" class="dropzone ui-state-default"></div>
		<div id="dropzone4" class="dropzone ui-state-default"></div>
	</div>
</div>	
</body>
</html>


